<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts"
import debounce from '@/utils/debounce'
import echartsLiquidfill from 'echarts-liquidfill'

export default {
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    unit: {
      type: String,
      default: ''
    },
    ecdata: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      data1: [],
      color: ["#0050E2", "#FF5227", "#FF9200", "#0780ED", "#00AFC3", "#00FFAA"],
      chart: {}
    }
  },
  computed: {
    origin() {
      return this.ecdata
    },
    opt() {
      let that = this
      let opt = {
        title: [{
          text: "     " + that.ecdata + "分",
          subtext: '景区综合评分',
          x: '25%',
          y: '50%',
          textStyle: {
            // color: '#00ff00',
            fontSize: 14
          },
          subtextStyle: {
            // color: '#00ff00',
            fontSize: 12
          }
        },
        ],
        tooltip: { show: false },
        series: [{
          name: '库存情况',
          type: 'pie',
          radius: ['150%', '100%'],
          center: ['50%', '75%'],
          clockwise: false,
          data: that.data1,
          startAngle: 180,

          hoverAnimation: false,
          legendHoverLink: false,
          label: {
            show: false,
          },
          labelLine: {
            show: false
          },

        }

        ]
      }
      return opt
    }
  },
  watch: {
    origin() {
this.num()     
      this.chart.setOption(this.opt, true)
    }
  },
  mounted() {
    this.initChart()
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHanlder)
    const mian = document.getElementById('mian')
    mian.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
this.num()

  },
  methods: {
    num(){
       var number3 = parseFloat(this.ecdata) * 6;
      for (var i = 60; i >= 0; i--) {
        if (i < number3) {
          this.data1.push({
            value: 1,
            name: '景区评分',
            itemStyle: {
              color: '#29E8E9', borderWidth: 1,
              borderColor: '#ffffff',

            }
          })
        }
        if (i > number3 && i < 30) {
          this.data1.push({
            value: 1,
            name: '',
            itemStyle: { color: 'rgba(41,232,233,0.3)' }
          })
        }
        if (i > 30 && i < 60) {
          this.data1.push({
            value: 1,
            name: '',
            itemStyle: { color: 'transparent' }
          })
        }
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.ec)
      this.chart.setOption(this.opt)
    },
  }
}
</script>
